<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html>
<head>
<title>Stock Ticker</title>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.css">

</head>
<body>
	<h1>Stock Ticker</h1>

	<table id="tblDataGrid" class="table table-striped table-bordered" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th id="id">Symbol</th>
				<th id="insname">insname</th>
				<th id="listprice">otype</th>
				<th id="expdate">expdate</th>
				<th id="qt">qt</th>
				<th id="ql">ql</th>
				<th id="qw">qw</th>
				<th id="price">price</th>
				<th id="ptype">ptype</th>
				<th id="status">status</th>
				<th id="tp">tp</th>
			</tr>
		</thead>
		<tbody id="quote"></tbody>
	</table>
 <button class="add">Add</button>



	<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
	<script src="js/stomp.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
 <script type="text/javascript">
 $(function(){
	    $("#tblDataGrid").dataTable();
	  })
 </script>
	<script>
		//Create stomp client over sockJS protocol
		var socket = new SockJS("/ncmxTrade/ws");
		var stompClient = Stomp.over(socket);

		// Render price data from server into HTML, registered as callback
		// when subscribing to price topic
		function renderQuote(frame) {
			//alert();
			var quotes = JSON.parse(frame.body);
			$('#quote').empty();
			for ( var i in quotes) {
				var quote = quotes[i];
				//alert(JSON.stringify(quote));
				$('#quote').append(
						$('<tr>').append(
								$('<td>').html(quote.symbol),
								$('<td>').html(quote.insname),
								$('<td>').html(quote.otype),
								$('<td>').html(quote.expdate),
								$('<td>').html(quote.qt),
								$('<td>').html(quote.ql),
								$('<td>').html(quote.qw),
								$('<td>').html(quote.price),
								$('<td>').html(quote.ptype),
								$('<td>').html(quote.status),
								$('<td>').html(quote.tp)
							)	
						);
			}
		}

		// Callback function to be called when stomp client is connected to server
		var connectCallback = function() {
			stompClient.subscribe('/topic/quote', renderQuote);
		};

		// Callback function to be called when stomp client could not connect to server
		var errorCallback = function(error) {
			alert(error.headers.message);
		};

		// Connect to server via websocket
		stompClient.connect("guest", "guest", connectCallback, errorCallback);

		
		
	</script>
</body>
</html>

